/**
 * 页面：使用指南
 * 功能：通过步骤条与卡片列出环境准备、快速开始与进阶配置，并提供跳转到具体指南/FAQ
 * 技术栈：Ant Design Typography / Steps / Row / Col / Card / List / Button
 */
import React from 'react'
import { Typography, Steps, Row, Col, Card, List, Button, Divider, theme } from 'antd'
import { useNavigate } from 'react-router-dom'

const { Title, Paragraph, Text } = Typography

function Guide() {
  const nav = useNavigate()
  const { token } = theme.useToken()

  const cardStyle: React.CSSProperties = {
    background: 'transparent',
    border: `1px solid ${token.colorBorder}`,
    borderRadius: 12,
  }

  return (
    <div style={{ padding: 16 }}>
      <Title level={3} style={{ marginBottom: 8 }}>使用指南</Title>
      <Paragraph type="secondary" style={{ marginBottom: 16 }}>
        按照以下步骤，快速完成环境准备、项目创建与功能体验。
      </Paragraph>

      <Steps
        items={[
          { title: '登录/进入系统' },
          { title: '创建项目' },
          { title: '配置数据源' },
          { title: '生成与发布' },
        ]}
        style={{ marginBottom: 16 }}
      />

      <Row gutter={[16, 16]}>
        <Col xs={24} md={8}>
          <Card title="环境准备" bordered style={cardStyle}>
            <List
              size="small"
              dataSource={[
                '浏览器建议：Chrome 95+/Edge 95+',
                '网络建议：可访问所需 API/OSS 存储',
                '账号权限：具备项目使用权限',
              ]}
              renderItem={(i) => <List.Item style={{ padding: '6px 0' }}>{i}</List.Item>}
            />
          </Card>
        </Col>
        <Col xs={24} md={8}>
          <Card title="快速开始" bordered style={cardStyle}>
            <List
              size="small"
              dataSource={[
                '新建项目，选择模版或空白项目',
                '在设置中完善基础信息与主题色',
                '进入工作台创建第一个内容条目',
              ]}
              renderItem={(i) => <List.Item style={{ padding: '6px 0' }}>{i}</List.Item>}
            />
          </Card>
        </Col>
        <Col xs={24} md={8}>
          <Card title="进阶配置" bordered style={cardStyle}>
            <List
              size="small"
              dataSource={[
                '接入第三方数据源并配置同步',
                '开启通知与安全策略（MFA 等）',
                '按需启用 AI/可视化等增强模块',
              ]}
              renderItem={(i) => <List.Item style={{ padding: '6px 0' }}>{i}</List.Item>}
            />
          </Card>
        </Col>
      </Row>

      <Divider style={{ margin: '16px 0' }} />
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button type="primary" onClick={() => nav('/docs/guide')}>查看完整指南</Button>
        <Button onClick={() => nav('/docs/faq')}>查看常见问题</Button>
      </div>
    </div>
  )
}

export default Guide
